<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单域修饰符</title>
    <style>
      .bule {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <pre>
     vue自定义指令：本身提供的一些指令满足不了业务需求 

     ---------------------Vue.directive('name','钩子函数')-------------
     
     bind:绑定元素时候调用(只调用一次)，在这里可以进行一次性的初始化设置
     inserted:被绑定元素插入父节点时调用
     钩子函数：除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
      </pre
    >
    <div class="box">
      <form action="">
        <label for="user">用户名</label>
        <input type="text" id="user" v-bgc="{color:'purple'}" v-focus />
      </form>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      //Vue.directive('自定义指令名称', {
      //   bind：
      //   inserted：
      //   })
      //声明自定义属性不需要加v-
      Vue.directive('focus', {
        //钩子函数：系统给提供的方法，能让程序在某一阶段做某项动作
        inserted: function (el) {
          // el使用指令的元素
          el.focus() //dom元素
        },
      })
      //自定义属性带参数
      Vue.directive('bgc', {
        bind: function (el, binding) {
          console.log(binding) //一个对象
          // def: {bind: ƒ}
          // expression: "{'color':'blue'}"
          // modifiers: {}
          // name: "bgc"
          // rawName: "v-bgc"
          // value: {color: "blue"}
          // __proto__: Object
          el.style.backgroundColor = binding.value.color
        },
      })

      new Vue({
        el: '.box',
        data: {
          blue: 'blue',
        },
        methods: {},
      })
    </script>
  </body>
</html>
